!
<template>
  <ul
    :style="{ left: contextmenu.left + 'px', top: contextmenu.top + 'px' }"
    class="contextmenu"
  >
    <li @click="refresh">刷新</li>
    <li @click="closeOther">关闭其他</li>
    <li @click="closeAll">关闭全部</li>
  </ul>
</template>

<script>
export default {
  name: "RightMenu",
  props: {
    contextmenu: {
      type: Object,
      default: function () {
        return {
          top: 0,
          left: 0,
          targetItem: {},
        };
      },
    },
  },
  data() {
    return {};
  },
  
 
  methods: {
   
    //刷新
    refresh() {
      this.$emit("refresh");
    },
    //关闭其他
    closeOther() {
      this.$emit("closeOther");
    },
    //关闭全部
    closeAll() {
      this.$emit("closeAll");
    },
  },
};
</script>

<style lang="scss" scoped>
.contextmenu {
    width: 80px;
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    li {
      margin: 0;
      padding: 7px 16px;
      cursor: pointer;
      &:hover {
        background: #eee;
      }
    }
  }
</style>
